{#
Copyright 2025 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

#}<!doctype html>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Experiment results</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@300;400;500;600;700&display=swap" rel="stylesheet">
{% set shared_css = '' %}
{% if shared_css_content %}
<style>
{{ shared_css_content | safe }}
</style>
{% endif %}

{% if base_js_content %}
<script>
window.BASE_RELATIVE_PATH = '{% if sample %}../../{% elif benchmark %}../../{% endif %}';
{{ base_js_content | safe }}
</script>
{% endif %}

<style>
* {
    box-sizing: border-box;
}
html {
    line-height: 1.15;
}
body {
    font-family: 'Overpass Mono', monospace;
    font-size: 16px;
    background-color: #f7f9fc;
    color: #292929;
}
span {
    font-family: 'Overpass', sans-serif;
}
.signature a {
    text-decoration: none;
    color: #5389ff;
    font-size: 15px;
}
body.dark-mode {
    background-color: #292929;
    color: #f7fafc;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    overflow-x:hidden;
    margin-top: 15px;
    margin-bottom: 15px;
}
td, th {
    border: 0;
    padding: 5px;
    text-align: left;
}
.dark-mode td, .dark-mode th {
    border-right: 1px #3d3d3d solid;
    border-bottom: 1px #3d3d3d solid;
}
td:first-child, th:first-child {
    border-left: 1px #a0aec0 solid;
}
.dark-mode td:first-child, .dark-mode th:first-child {
    border-left: 1px #3d3d3d solid;
}
th {
    border-top: 1px #a0aec0 solid;
}
th:first-child {
    border-top-left-radius: 8px;
}
th:last-child {
    border-top-right-radius: 8px;
}
.dark-mode th {
    border-top: 1px #3d3d3d solid;
}
tbody tr:nth-child(odd) {
    background-color: #edf2f7;
}
.dark-mode select {
    background-color: #3d3d3d;
    color: #f7fafc;
    border-color: #3d3d3d;
}
.dark-mode select:focus {
    background-color: #3d3d3d;
    color: #f7fafc;
}
.dark-mode option {
    background-color: #3d3d3d;
    color: #f7fafc;
}

.dark-mode tbody tr:nth-child(odd) {
    background-color: #333333;
}
.chat_prompt {
    background-color: #e2e8f0;
    border: 1px solid #a0aec0;
    max-width: 50%;
    overflow: scroll;
}
.chat_response {
    background-color: #ececec;
    border: 1px solid #718096;
    max-width: 50%;
    overflow: scroll;
    margin-left: auto;
}
.dark-mode .chat_prompt {
    background-color: #222222;
}
.dark-mode .chat_response {
    background-color: #222222;
}
.code-container {
    display: flex;
    border: 1px solid #a0aec0;
    background-color: #edf2f7;
    overflow-x: auto;
    font-family: 'Overpass Mono', monospace;
    width: fit-content;
    max-width: 100%;
}

.dark-mode .code-container {
    background-color: #222222;
    border: 1px solid #3d3d3d;
}
.line-numbers {
    margin: 0;
    padding: 0.5em;
    text-align: right;
    background-color: #e2e8f0;
    border-right: 1px solid #a0aec0;
    user-select: none;
    min-width: 2.5em;
    color: #718096;
}
.dark-mode .line-numbers {
    background-color: #222222;
    border-right: 1px solid #3d3d3d;
    color: #a0aec0;
}
.code-content {
    margin: 0;
    padding: 0.5em;
    flex-grow: 0;
}
.line-numbers span,
.code-content code {
    display: block;
    line-height: 1.5;
    white-space: pre;
}
.dark-mode .code-content code {
    color: #e2e8f0;
}

.hljs {
    background: transparent;
    padding: 0;
}
.dark-mode .hljs {
    background: #222222;
    color: #e2e8f0;
}
.toc {
    position: fixed;
    right: -400px;
    top: 80px;
    width: 400px;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px 0 0 8px;
    padding: 16px;
    max-height: 80vh;
    overflow-y: auto;
    transition: right 0.3s ease;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.toc.open {
    right: 0;
}

.toc-toggle {
    position: fixed;
    right: 20px;
    top: 80px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    z-index: 1001;
    transition: right 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toc-toggle.open {
    right: 405px;
}

.dark-mode .toc,
.dark-mode .toc-toggle {
    background: #292929;
    border-color: #3d3d3d;
}

.toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.dark-mode .toc-header {
    border-color: #3d3d3d;
}

.toc-tree {
    list-style: none;
    padding-left: 0;
    font-size: 16px;
}

.toc-tree ul {
    list-style: none;
    padding-left: 16px;
    margin: 4px 0;
    border-left: 1px solid #e5e7eb;
}

.dark-mode .toc-tree ul {
    border-color: #3d3d3d;
}

.toc-tree li {
    margin: 8px 0;
    line-height: 1.4;
}

.toc-link {
    color: #374151;
    text-decoration: none;
    display: block;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.dark-mode .toc-link {
    color: #e5e7eb;
}

.toc-link:hover {
    color: #3b82f6;
    background: #f3f4f6;
}

.dark-mode .toc-link:hover {
    background: #333333;
}

.toc-section {
    color: #111827;
    margin-bottom: 12px;
}

.dark-mode .toc-section {
    color: #f3f4f6;
}

.toc-subsection {
    color: #4b5563;
}

.dark-mode .toc-subsection {
    color: #d1d5db;
}

.toc-item {
    color: #6b7280;
    font-size: 13px;
}

.dark-mode .toc-item {
    color: #9ca3af;
}

.log-tag {
    color: #8b7355;
}

.dark-mode .log-tag {
    color: #a08968;
}

.chat_prompt .log-tag {
    color: #5a6b8a;
}

.dark-mode .chat_prompt .log-tag {
    color: #7a8ba8;
}
</style>
<body
      x-data="{
        darkMode: localStorage.getItem('darkMode') === 'true',
        detailsOpen: true,
        toggleDarkMode() {
          this.darkMode = !this.darkMode;
          localStorage.setItem('darkMode', this.darkMode);
        },
        formatDate(timestamp) {
            const date = new Date(timestamp);
            const day = date.getDate().toString().padStart(2, '0');
            const month = date.toLocaleString('en-AU', { month: 'long' });
            const year = date.getFullYear();
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            return `${day} ${month} ${year}, ${hours}:${minutes}`;
        },
        formatTotalRunTime(total_run_time) {
            const hours = Math.floor(total_run_time / 3600);
            const minutes = Math.floor((total_run_time % 3600) / 60);
            const seconds = Math.floor(total_run_time % 60);
            return `${hours}h ${minutes}m ${seconds}s`;
        }
      }"
      :class="darkMode ? 'bg-gray-900 text-white dark-mode' : 'bg-[#f7f9fc] text-gray-800'">

  <div class="p-4 shadow-md border-b">
    <div class="flex items-center gap-4 justify-end">
        <button @click="toggleDarkMode()" class="p-2 rounded-full focus:outline-none transition duration-150">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" :class="darkMode ? 'hidden' : 'block'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" :class="darkMode ? 'block' : 'hidden'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
            </svg>
        </button>
        <div x-data="{ exportOpen: false }" class="relative">
            <button @click="exportOpen = !exportOpen" class="border font-medium py-2 px-4 rounded text-sm shadow flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                </svg>
                <span>Export</span>
            </button>

            <div
                x-show="exportOpen"
                @click.away="exportOpen = false"
                class="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5"
                :class="darkMode ? 'bg-gray-800 text-white' : 'bg-white text-gray-800'"
            >
                <div class="py-1" role="menu">
                    <a href="{{ json_url_path }}" class="block px-4 py-2 text-sm" role="menuitem">Export as JSON (.json)</a>
                    <a href="{{ csv_url_path }}" class="block px-4 py-2 text-sm" role="menuitem">Export as CSV (.csv)</a>
                </div>
            </div>
        </div>
    </div>

    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex flex-col items-center md:items-start">
            <h1 class="text-2xl md:text-3xl font-bold font-mono pb-2">
                {% if benchmark %}
                    <span>Benchmark:</span>
                    <span class="prettify-benchmark-name">{{ benchmark.id }}</span>
                    <p class="text-2xl text-gray-500">Project: {{ benchmark.project }}</p>
                {% else %}
                    Experiment Report
                {% endif %}
            </h1>

        </div>

        {% if accumulated_results %}
            <div class="text-center md:text-right space-y-2 text-nowrap flex-shrink-0 min-w-[300px]"
                 x-data="{
                    formatDate(timestamp) {
                        const date = new Date(timestamp);
                        const day = date.getDate().toString().padStart(2, '0');
                        const month = date.toLocaleString('en-AU', { month: 'long' });
                        const year = date.getFullYear();
                        const hours = date.getHours().toString().padStart(2, '0');
                        const minutes = date.getMinutes().toString().padStart(2, '0');
                        return `${day} ${month} ${year}, ${hours}:${minutes}`;
                    },
                    formatTotalRunTime(total_run_time) {
                        const hours = total_run_time.split(':')[0];
                        const minutes = total_run_time.split(':')[1];
                        const seconds = parseInt(total_run_time.split(':')[2]);
                        return `${hours}h ${minutes}m ${seconds}s`;
                    }
                 }">
                {% if time_results %}
                <p class="text-center md:text-left font-bold text-nowrap">
                    {% if time_results.start_time %}
                        <span x-text="formatDate('{{ time_results.start_time }}')"></span>
                    {% endif %}
                    {% if time_results.completion_time %}
                        →
                        <span x-text="formatDate('{{ time_results.completion_time }}')"></span>
                    {% endif %}
                    {% if time_results.total_run_time %}
                        (<span x-text="formatTotalRunTime('{{ time_results.total_run_time }}')"></span>)
                    {% endif %}
                </p>
                {% endif %}
                {% if accumulated_results.total_runs > 0 %}
                    <p class="text-lg md:text-2xl">Build success rate: <strong>{{ accumulated_results.build_rate|percent }}%</strong></p>
                {% endif %}
            </div>
        {% endif %}
    </div>

    <div class="container mx-auto mt-6">
        <button
            @click="detailsOpen = !detailsOpen"
            class="w-full flex items-center justify-between p-3 focus:outline-none"
            :class="detailsOpen ? 'border-b border-gray-500' : ''"
        >
            <span class="font-medium">Accumulated Results</span>
            <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 transform transition-transform duration-200"
                :class="detailsOpen ? 'rotate-180' : ''"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
            >
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
        </button>

        <div
            x-show="detailsOpen"
            class="mt-4 p-6 rounded-lg grid grid-cols-1 md:grid-cols-2 gap-4 border border-dashed border-gray-500"
        >
            <div class="space-y-2">
                <p><span class="font-medium">Total
                    {% if benchmark %}
                        Samples:
                    {% else %}
                        Benchmarks:
                    {% endif %}
                    </span>
                    {{accumulated_results.total_runs}}
                </p>
                <p><span class="font-medium">Successful Builds:</span> {{accumulated_results.compiles}}</p>
                {% if accumulated_results.total_runs > 0 %}
                    <p><span class="font-medium">Average Coverage:</span> {{accumulated_results.total_coverage |percent }}%</p>
                {% endif %}
            </div>
            <div class="space-y-2">
                {% if accumulated_results.total_runs > 0 %}
                    <p><span class="font-medium">Average Line Coverage Diff:</span> {{accumulated_results.average_line_coverage_diff |percent }}%</p>
                {% endif %}
                <p><span class="font-medium">Crashes:</span> {{accumulated_results.crashes}}</p>
                <p><span class="font-medium">Model:</span> <strong>{{model}}</strong></p>
            </div>
        </div>
    </div>
  </div>

  <nav class="text-base mt-5 container mx-auto">
    <ol class="flex items-center space-x-2">
        <li class="flex items-center space-x-2">
            <svg class="h-4 w-4" :class="darkMode ? 'text-gray-500' : 'text-gray-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
            <a href="{% if sample %}../../{% elif benchmark %}../../{% endif %}index.html" class="hover:text-gray-600 transition-colors" :class="darkMode ? 'text-gray-300 hover:text-gray-400' : 'text-gray-600'">
                Main Index
            </a>
        </li>

        {% if benchmark %}
        <li class="flex items-center space-x-2">
            <svg class="h-4 w-4" :class="darkMode ? 'text-gray-500' : 'text-gray-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
            <a href="../../benchmark/{{ benchmark.id|urlencode }}/index.html"
               class="hover:text-gray-600 transition-colors"
               :class="darkMode ? 'text-gray-300 hover:text-gray-400' : 'text-gray-600'">
                <span class="prettify-benchmark-name">{{ benchmark.id }}</span>
            </a>
        </li>
        {% endif %}

        {% if sample %}
        <li class="flex items-center space-x-2">
            <svg class="h-4 w-4" :class="darkMode ? 'text-gray-500' : 'text-gray-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
            <span class="text-gray-500" :class="darkMode ? 'text-gray-400' : 'text-gray-500'">
                Sample {{ sample.id }}
            </span>
        </li>
        {% endif %}
    </ol>
  </nav>


  <div class="controls mt-4 flex flex-col gap-4 mx-auto container">
    <div class="search-controls flex flex-wrap gap-4 items-center">
        <div class="search-bar flex-grow max-w-2xl">
            <input type="text"
                   id="searchInput"
                   placeholder="Search samples..."
                   class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-transparent">
        </div>
    </div>
    <div class="search-results hidden" id="searchResults">
        <div class="search-results-header mb-4 ml-4">
            <h2 class="text-lg font-bold">Search Results</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400" id="searchResultsCount"></p>
        </div>
        <div class="search-results-body space-y-3" id="searchResultsBody"></div>
    </div>
</div>

<div class="container mx-auto mt-8">
    {% block content %}{% endblock %}
</div>

<div class="mb-20"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.3/cdn.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
<script src="d3.min.js" defer></script>
<script src="plot.min.js" defer></script>

{% if unified_data %}
<script type="application/json" id="unified-data">{{ unified_data|tojson|safe }}</script>
{% endif %}

<!-- added highlight.js for syntax highlighting -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<!-- additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/c.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/cpp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/java.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/rust.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/go.min.js"></script>

</body>